<template>
  <div class="container">
    <div>str：{{str}}</div>
    <input type="button" value="修改str" @click="changeStr">
    <div class="swiper-slide">
      <!-- 要轮播的内容 -->
      <div class="slide" v-for="(item,index) in imgs" :key="index">
        <img :src="item"/>
      </div>
    </div>
  </div>
</template>  
<script>

// @表示src目录
import Swiper from "@/utils/myswiper.js";

export default {
  name: "Banner",
  data(){
    return {
      imgs:[],
      str:"hi"
    }
  },

  created(){
    this.$http.get("http://localhost:3000/bannerImgs")
    .then(res=>{
      if(res.data.status==="success"){
        // 修改数据，引起组件的重新渲染（组件更新）。
        this.imgs = res.data.data;//vue中，数据更新后，并不会理解渲染dom。而是把渲染dom的代码放在异步更新队里。
        console.log("imgs",this.imgs);
       
        // $nextTick():写在imgs更新新后，$nextTick回调函数的代码，会在imgs引起模板重新渲染后，执行。相当于imgs引起的updated
        this.$nextTick(
                ()=>{
                  console.log("imgs引起的nextTick");          
                  console.log("轮播的内容：",document.querySelector(".swiper-slide").innerHTML);//也有内容。
                  // new Swiper(".container",{});
                }
              
        );
      }
    })
  },

  methods:{
    changeStr(){
      this.str += "1";
      console.log("this.str",this.str);
    }
  }

};
</script>
  
<style scoped>
.my-swipe{
  width: 100%;
  height: 12.5rem;
  background-color: skyblue;
}

img{
  width: 100%;
  height: 100%;
}
</style>